<template>
	<div class="header">
		<div class="slogan">
			<p class="p1">小智食谱</p>
			<p class="p2">你想吃的都在这里</p>
		</div>
		<div class="logo">
			<a href="#/test"><img src="../assets/caipu/logo.png"></a>
		</div>
		<div class="search">
			<span class="iconfont icon-sousuo"></span>
			<input  type="search" placeholder="搜索菜谱、食材" v-model="searchData"/>
		</div>
		<div :class="a1" @mousedown="handleDown" ref="xiaozhi" @mouseup="handleUp" >
		</div>
		<div class="menu">
			<a href="#/test2"><img src="../assets/caipu/menu.png"></a>
		</div>
	</div>
</template>

<script>
// 导入请求数据的 baseurl
// import baseUrl from '@/utils/urlconfig'
// 导入语音识别，语音合成api
// import TtsRecorder from '@/assets/js/audio'
import IatRecorder from '@/assets/js/IatRecorder'
const iatRecorder = new IatRecorder()// 小语种-中文方言-appId
// const ttsRecorder = new TtsRecorder()
export default {
  data () {
    return {
      searchData: '',
	  a1:"ai1",
    }
  },
  methods: {
    handleDown () {
	  this.translationStart()
	  this.a1="ai2"
    },
    handleUp () {
	  this.a1="ai1"
	  this.translationEnd()
    },
	translationStart () {
	  iatRecorder.start()
	  iatRecorder.onTextChange = (text) => {
	    var inputText = text
	    // this.searchData = inputText // .substring(0, inputText.length - 1); 文字处理，因为不知道为什么识别输出的后面都带‘。’，这个方法是去除字符串最后一位
	    this.searchData = inputText.substring(0, inputText.length - 1) // .substring(0, inputText.length - 1); 文字处理，因为不知道为什么识别输出的后面都带‘。’，这个方法是去除字符串最后一位
	    console.log(this.searchData)
	  		console.log(iatRecorder.status)
	  		if(iatRecorder.status === "end"){
	  			this.$emit("soundsword",this.searchData)
	  		}
	    // var lishi = RegExp(/今天的天气/)
	  }
	},
	translationEnd () {

	  iatRecorder.stop()
	}
    },
}
</script>

<style scoped>
	p,ul,li{
		margin: 0;
		padding: 0;
	}
	ul{
		list-style: none;
	}
	/* header 头部制作------------start------------ */
		.header {
			width: 100%;
			height: 0.75rem;
			padding-top: 0.125rem;
			color: #FAFAFA;
			position: sticky;
			top: 0px;
			z-index: 20;
			background-color: #F0F0F0
		}
		.header div{
			float: left;
		}
		.header div img{
			height: 0.5625rem;
			width: 0.5625rem;
		}
		.header .slogan{
			width: 1.125rem;
			height: 100%;
			font-family: "楷体";
			text-align: center;
			margin-left: 0.3125rem;
			color: #949292;
		}
		.header .slogan .p1{
			font-size: 0.275rem;
			font-weight: bold;
		}
		.header .slogan .p2{
			font-size: 0.1375rem;
		}
		.header .logo{
			margin-left: 0.15625rem;
		}
		.header .search{
			position: relative;
			width: 3.9375rem;
			height: 0.5625rem;
			margin-left: 0.925rem;
		}
		.header .search .iconfont{
			position: absolute;
			font-size: 0.2625rem;
			top: 0.125rem;
			left: 0.1875rem;
			font-weight: bold;
			color: rgb(119, 119, 119);
		}
		.header .search input{
			font-family:'iconfont';
			width: 100%;
			height: 0.5625rem;
			background:#E6e6e6;
			outline:none;
			border-radius: 0.0625rem;
			border: none;
			padding-left: 0.55rem;
			font-size: 0.20625rem;
		}
	/* 	.header .search input:before{
			content: "\e778";
		} */
		.header .ai1{
			background: url("/xiaozhi.png");
			margin-left: 0.175rem;
			height: 0.5625rem;
			width: 0.5625rem;
			background-size: 0.5625rem,0.5625rem;
		}
		.header .ai2{
			background: url("/xiaozhi2.png");
			margin-left: 0.175rem;
			height: 0.5625rem;
			width: 0.5625rem;
			background-size: 0.5625rem,0.5625rem;
		}
		.header .menu{
			margin-left: 1.625rem;
		}
		/* header 头部制作------------end------------ */
</style>
